<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name='viewport' content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>Notie Test Page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="dist/notie.css">
    <style>
      /* Styles can be overwritten after inlcuding notie.css */
      .notie-container {
        /*box-shadow: none;*/
      }
      .notie-background-overlay {
        /*background-color: #F0F0F0;*/
      }
    </style>

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto Mono', monospace;
        background-color: #E8E8E8;
      }
      .div-ext {
        height: 100vh;
        width: 100%;
        display: table;
        text-align: center;
      }
      .div-int {
        display: table-cell;
        vertical-align: middle;
      }
      button {
        cursor: pointer;
        font-size: 18px;
        border: 2px solid #000;
        border-radius: 2px;
        background-color: transparent;
        outline: 0;
        margin: 2px;
        margin-top: 4px;
        padding: 5px;
      }
      a {
        color: #585858;
      }
    </style>
  </head>
  <body>
    <div class="div-ext">
      <div class="div-int">

        <div style="font-size:40px;margin-bottom:20px;">notie.js</div>

        <div style="margin-bottom:20px;padding-left:50px;padding-right:50px;">
          <button onclick="success()">Success</button>
          <button onclick="warning()">Warning</button>
          <button onclick="error()">Error</button>
          <button onclick="info()">Info</button>
          <button onclick="force()">Force</button>
          <button onclick="confirm()">Confirm</button>
          <button onclick="input()">Input</button>
          <button onclick="select()">Select</button>
          <button onclick="date()">Date</button>
        </div>

        <div><b>Official demo page:</b></div>
        <a href="https://jaredreich.com/notie" target="_blank" style="font-size:12px;">https://jaredreich.com/notie</a>

      </div>
    </div>

    <!-- JavaScript -->
    <script src="dist/notie.js"></script>
    <script>
      notie.setOptions({
        alertTime: 2
      })

      function success () {
        notie.alert({ type: 1, text: 'Success!', time: 2 })
      }

      function warning () {
        notie.alert({ type: 2, text: 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', time: 2 })
      }

      function error () {
        notie.alert({ type: 3, text: 'Error.', time: 2 })
      }

      function info () {
        notie.alert({ type: 4, text: 'Information.', time: 2 })
      }

      function force () {
        notie.force({
          type: 3,
          text: 'You cannot do that, sending you back.',
          buttonText: 'OK',
          callback: function () {
            notie.alert({ type: 3, text: 'Maybe when you\'re older...' })
          }
        })
      }

      function confirm () {
        notie.confirm({
          text: 'Are you sure you want to do that?<br><b>That\'s a bold move...</b>',
          cancelCallback: function () {
            notie.alert({ type: 3, text: 'Aw, why not? :(', time: 2 })
          },
          submitCallback: function () {
            notie.alert({ type: 1, text: 'Good choice! :D', time: 2 })
          }
        })
      }

      function input() {
        notie.input({
          text: 'Please enter your email address:',
          cancelCallback: function (value) {
            notie.alert({ type: 3, text: 'You cancelled with this value: ' + value, time: 2 })
          },
          submitCallback: function (value) {
              notie.alert({ type: 1, text: 'You entered: ' + value, time: 2 })
          },
          type: 'text',
          placeholder: 'name@example.com',
          spellcheck: 'false'
        })
      }

      function select() {
        notie.select({
          text: 'Demo item #1, owner is Jane Smith',
          cancelText: 'Close',
          cancelCallback: function () {
            notie.alert({ type: 5, text: 'Cancel!' })
          },
          choices: [
            {
              text: 'Share',
              handler: function () {
                notie.alert({ type: 1, text: 'Share item!' })
              }
            },
            {
              text: 'Open',
              handler: function () {
                notie.alert({ type: 1, text: 'Open item!' })
              }
            },
            {
              type: 2,
              text: 'Edit',
              handler: function () {
                notie.alert({ type: 2, text: 'Edit item!' })
              }
            },
            {
              type: 3,
              text: 'Delete',
              handler: function () {
                notie.alert({ type: 3, text: 'Delete item!' })
              }
            }
          ]
        })
      }

      function date() {
        notie.date({
          value: new Date(2015, 8, 27),
          cancelCallback: function (date) {
            notie.alert({ type: 3, text: 'You cancelled: ' + date.toISOString() })
          },
          submitCallback: function (date) {
            notie.alert({ type: 1, text: 'You selected: ' + date.toISOString() })
          }
        })
      }
    </script>
  </body>
</html>
